<template>
    <div class="captcha-input">
      <input
        v-for="(digit, index) in digits"
        :key="index"
        v-model="digits[index]"
        ref="inputs"
        @input="handleInput(index)"
        @keydown="handleKeyDown(index, $event)"
      >
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  const digits = ref(['', '', '', '', '', '']);
  
  const handleInput = (index) => {
    if (digits.value[index].length > 1) {
      digits.value[index] = digits.value[index].slice(0, 1);
    }
    if (index < digits.value.length - 1 && digits.value[index].length === 1) {
      inputs.value[index + 1].focus();
    }
  };
  
  const handleKeyDown = (index, event) => {
    if (event.key === 'Backspace' && index > 0 && !digits.value[index]) {
      inputs.value[index - 1].focus();
    }
  };
  
  const inputs = ref([]);
  
  onMounted(() => {
    inputs.value[0].focus();
  });
  </script>
  
  <style scoped>
  .captcha-input {
    display: flex;
  }
  
  input {
    width: 10.5vw;
    height: 10.5vw;
    text-align: center;
    margin-right: 4.6vw;;
    border: none;
    border-radius: 10px;
    background-color: rgb(244, 244, 244);
  } 
  input:focus {
  box-shadow: 0 0 1.5px 0 #007bff; /* 设置获得焦点时的阴影效果，可以自定义颜色和样式 */
}
  </style>
  